<template>
  <div class="book-list">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-input
          v-model="searchQuery"
          placeholder="搜索图书..."
          class="search-input"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="book-grid">
      <el-col
        v-for="book in books"
        :key="book.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
      >
        <el-card class="book-card" :body-style="{ padding: '0px' }">
          <img :src="book.cover" class="book-image" />
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p class="author">{{ book.author }}</p>
            <div class="price-stock">
              <span class="price">¥{{ book.price }}</span>
              <span class="stock">库存: {{ book.stock }}</span>
            </div>
            <div class="actions">
              <el-button
                type="primary"
                size="small"
                @click="viewDetail(book.id)"
              >
                查看详情
              </el-button>
              <el-button
                type="success"
                size="small"
                :disabled="!book.stock"
                @click="addToCart(book)"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
      v-if="total > 0"
      class="pagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getBooks } from '@/api/book'
import { addToCart } from '@/api/cart'
import type { Book } from '@/api/book'

const router = useRouter()
const books = ref<Book[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const searchQuery = ref('')
const loading = ref(false)

const loadBooks = async () => {
  loading.value = true
  try {
    const res = await getBooks({
      page: currentPage.value,
      size: pageSize.value,
      query: searchQuery.value
    })
    books.value = res.content
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取图书列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadBooks()
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  loadBooks()
}

const viewDetail = (id: number) => {
  router.push(`/book/${id}`)
}

const handleAddToCart = async (book: Book) => {
  try {
    await addToCart(book.id, 1)
    ElMessage.success('成功加入购物车')
  } catch (error) {
    ElMessage.error('加入购物车失败')
  }
}

onMounted(() => {
  loadBooks()
})
</script>

<style scoped>
.book-list {
  padding: 20px;
}

.search-input {
  margin-bottom: 20px;
}

.book-grid {
  margin-bottom: 20px;
}

.book-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
}

.book-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.book-info {
  padding: 15px;
}

.book-info h3 {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.price-stock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.stock {
  color: #909399;
  font-size: 14px;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style> 